<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>订单清关</title>
  <link rel="stylesheet" href="../../js/jiang_xue_jiao/bootstrap-3.3.5-dist/css/bootstrap.min.css">


  <style>
    * {
      padding: 0;
      margin: 0;
      /* outline: solid orange; */
    }

    .all {
      width: 100%;
    }

    .order_list {
      font-size: 16px;
      width: 94%;
      padding: 15px 0px;
      margin-left: 3%;
      border-bottom: 1px solid rgb(207, 207, 207);
    }

    .search {
      margin-top: 5px;
      width: 94%;
      margin-left: 3%;
      background-color: #f7f7f7;
      padding-bottom: 20px;
    }

    label {
      width: 30%;
      font-size: 14px;
      font-weight: 400;
      margin-top: 20px;
      margin-left: 20px;
    }

    label span {
      display: inline-block;
      width: 25%;
      /* outline: solid #fba; */
    }

    label input {
      width: 60%;
      /* outline: solid #bfa; */
      height: 30px;
      font-size: 12px;
      font-weight: 300;
      margin-left: 10px;

    }

    .search_btn,
    .reset_btn {
      margin-left: 40px;
      background-color: #108ee9;
      color: #fff;
      border: none;
      border-radius: 3px;
      width: 70px;
      height: 30px;
      line-height: 30px;
    }

    .nav {
      display: flex;
      margin-left: 3%;
      margin-top: 20px;
      cursor: pointer;
    }

    .nav div {
      width: 140px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border: 1px solid #e8e7e7;
    }

    table {
      width: 94%;
      margin-left: 3%;
      height: 40px;
      line-height: 40px;
      border: #f4f4f4;
    }

    thead th {
      font-size: 13px;
      text-align: center;
      background-color: #f4f4f4;
    }

    #myTbody {
      text-align: center;
      font-size: 12px;
    }

    .row_1 td {
      height: 40px;
    }

    .T_left {
      width: 25%;
      display: flex;
      justify-content: space-between;
      margin-left: 20px;
      font-weight: 500;
      font-size: 14px;
    }

    .T_left>.method {
      color: #3366FF;
    }

    .T_right {
      margin-right: 20px;
      color: #3366FF;
      font-weight: 500;
      font-size: 14px;
    }

    .T_row_1 {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 40px;
    }

    .productText {
      text-align: center;
      font-size: 14px;
    }

    .productText span {
      margin-left: 20px;
    }

    img {
      width: 50px;
      height: 50px;
    }

    .money_num {
      height: 60px;
    }

    .money_num div {
      height: 40px;
    }

    .information {
      flex-direction: column;
      height: 60px;
    }

    .information div {
      height: 25px;
      line-height: 25px;
    }

    .row_2 td {
      height: 60px;
    }

    .productText div {
      line-height: 60px;
      margin-left: 20px;
    }

    .footer {
      display: flex;
      justify-content: center;
      margin: 30px auto;
    }

    .pre,
    .next,
    .myPage div {
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border: 1px solid #cfcccc;
      border-radius: 2px;
      margin-left: 8px;
      font-size: 12px;
      cursor: pointer;
    }

    .active {
      background-color: #108ee9;
      color: #fff;
    }

    .myPage {
      display: flex;
    }

    .nav>.activeAll {
      border: solid 1px #108ee9;
      color: #108ee9;
    }

    .myTable {
      animation-duration: 0.5s;
      animation-name: slidein;
    }

    @keyframes slidein {
      from {
        margin-left: 100%;
        width: 100%;
      }

      to {
        margin-left: 3%;
        width: 94%;
      }
    }
  </style>
</head>

<body>
  <div class="all">
    <div class="order_list">交易订单</div>
  </div>
  <!-- 搜索框 -->
  <div class="search">
    <label>
      <span>订单编号</span>
      <input id="order_num" type="text" placeholder="请输入订单编号">
    </label>
    <label>
      <span>用户名</span>
      <input id="user" type="text" placeholder="请输入用户名">
    </label>
    <label>
      <span>联系电话</span>
      <input id="tel_num" type="text" placeholder="请输入手机号码">
    </label>
    <label>
      <span>开始时间</span>
      <input id="start_time" type="date">
    </label>
    <label>
      <span>结束时间</span>
      <input id="end_time" type="date">
    </label>

    <button class="search_btn">搜索</button>
    <button class="reset_btn">重置</button>
  </div>
  <!-- tab导航点击切换div -->
  <div class="nav">
    <div class="order activeAll">未清关</div>
    <div class="order">清关中</div>
    <div class="order">已清关</div>
    <div class="order">清关失败</div>
  </div>
  <!-- 表格 -->
  <table border="1" id="myTable">
    <thead>
      <tr>
        <th style="width:25%">商品</th>
        <th>总价/数量</th>
        <th>买家信息</th>
        <th>下单时间</th>
        <th>订单状态</th>
        <th>贸易状态</th>
        <th>清关状态</th>
        <th>清关信息</th>
        <th>实付金额</th>
      </tr>
    </thead>
    <tbody id="myTbody">

      <!-- <tr class="row_1">
        <td colspan="9">
          <div class="T_row_1">
            <div class="T_left">
              <div>订单号：111111111</div>
              <div>支付宝支付</div>
            </div>
            <div class="T_right">查看详情</div>
          </div>

        </td>
      </tr>
      <tr class="row_2">
        <td class="productText">
          <img src="../img/牛仔裤1.png" alt="">
          <span>商品标题</span>
          <span>商品规格</span>
        </td>
        <td class="money_num">
          <div>1000.00</div>
          <div>(2件)</div>
        </td>
        <td class="information">
          <div>用户名：</div>
          <div>收件人：</div>
          <div>13656768987</div>
        </td>
        <td>time</td>
        <td>待付款</td>
        <td>报税备货</td>
        <td>未清关</td>
        <td></td>
        <td>1000.00</td>
      </tr> -->
    </tbody>
  </table>

  <div class="footer">
    <div class="pre">&lt;</div>
    <div class="myPage">

    </div>
    <div class="next">&gt;</div>
  </div>

  <script src="../../js/jiang_xue_jiao/jquery-1.11.3.js"></script>
  <script type="text/javascript" src="../../js/jiang_xue_jiao/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
  <script src="../../js/jiang_xue_jiao/order_clearance.js"></script>


</body>

</html>